import React, { useState } from 'react';
import net from '../api'
import {
    Button,
    DatePicker,
    Form,
    Input,
    Col,
    Row,
    Card,
    message,
    Select
} from 'antd';
import { BaseURL } from '../api'

const { RangePicker } = DatePicker;

const FormPage = (props) => {
    const [loading, setLoading] = useState(false);
    const [pdfName, setPdfName] = useState('摩力保')

    const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 6 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 14 },
        },
    };


    const onFinish = async (values) => {
        setLoading(true);

        const {
            name,
            phone,
            bianHao,
            cardId,
            carName,
            carVin,
            carMotor,
            carFactory,
            carInstall,
            carMoney,
            startAndEndTime,
            carServeRemark,
            carFirstPeople,
            carProtectNumber,
        } = values;

        const formData = {
            name,
            phone,
            bianHao,
            cardId,
            carName,
            carVin,
            carMotor,
            carFactory,
            carInstall: carInstall.valueOf(),
            carMoney,
            carServeStart: startAndEndTime[0].valueOf(),
            carServeEnd: startAndEndTime[1].valueOf(),
            carServeRemark,
            carFirstPeople,
            carProtectNumber,
            pdfName,
        };

        try {
            const res = await net.post('/api/work/saveInformation', formData);

            if (res?.data?.code === 200) {
                const url = `${BaseURL}/api/work/makePdf?orderId=${res?.data?.data?.orderId}`;
                window.open(url)

                return message.success('提交成功')

            }
            message.error('提交失败');
        } catch (err) {
            console.log('===err', err);
        } finally {
            setLoading(false);
        }
    };

    const options = [
        {
            value: '摩力保',
            label: '摩力保',
        },
    ]

    const handleChange = (value) => {
        setPdfName(value)
    };

    return (
        <Form
            {...formItemLayout}
            onFinish={onFinish}
            style={{ minWidth: 600, textAlign: 'center' }}
        >
            <Card title="保障信息" bordered={true} style={{ marginBottom: 30 }}>
                <Row>
                    <Col span={12}>
                        <Form.Item
                            label="保单名"
                            name="pdfName"
                        >
                            <Select
                                defaultValue={pdfName}
                                onChange={handleChange}
                                options={options}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="保单号"
                            name="carProtectNumber"
                            rules={[{ required: true, message: '请输入保单号' }]}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="第一受益人"
                            name="carFirstPeople"
                            rules={[{ required: true, message: '请输入第一受益人' }]}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                </Row>
            </Card>
            <Card title="客户信息" bordered={true} style={{ marginBottom: 30 }}>
                <Row>
                    <Col span={12}>
                        <Form.Item
                            label="用户姓名"
                            name="name"
                            rules={[{ required: true, message: '请输入用户姓名' }]}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="电话"
                            name="phone"
                            rules={[{ required: true, message: '请输入电话' }]}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <Form.Item
                            label="证件号"
                            name="cardId"
                            rules={[{ required: true, message: '请输入证件号' }]}
                        >
                            <Input />
                        </Form.Item>
                    </Col>

                </Row>

            </Card>
            <Card title="车辆信息" bordered={true} style={{ marginBottom: 30 }}>
                <Row>
                    <Col span={12}>
                        <Form.Item
                            label="编号"
                            name="bianHao"
                            rules={[{ required: true, message: '请输入编号' }]}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="车辆购买金额"
                            name="carMoney"
                            rules={[{ required: true, message: '请输入车辆购买金额' }]}
                        >
                            <Input prefix="￥" />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <Form.Item
                            label="发动机号"
                            name="carMotor"
                            rules={[{ required: true, message: '请输入发动机号' }]}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="厂牌型号"
                            name="carFactory"
                            rules={[{ required: true, message: '请输入厂牌型号' }]}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <Form.Item
                            label="车牌号"
                            name="carName"
                            rules={[{ required: true, message: '请输入车牌号' }]}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                </Row>
            </Card>
            <Card title="设备信息" bordered={true} style={{ marginBottom: 30 }}>
                <Row>
                    <Col span={12}>
                        <Form.Item
                            label="VIN"
                            name="carVin"
                            rules={[{ required: true, message: '请输入VIN' }]}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="安装日期"
                            name="carInstall"
                            rules={[{ required: true, message: '请选择安装日期' }]}
                        >
                            <DatePicker />
                        </Form.Item>
                    </Col>
                </Row>
            </Card>
            <Card title="保障信息" bordered={true} style={{ marginBottom: 30 }}>
                <Row>
                    <Col span={12}>
                        <Form.Item
                            label="保障金额"
                            name="carMoney"
                            rules={[{ required: true, message: '请输入保障金额' }]}
                        >
                            <Input prefix="￥" />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item
                            label="服务备注"
                            name="carServeRemark"
                            rules={[{ required: true, message: '请输入服务备注' }]}
                        >
                            <Input />
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <Form.Item
                            label="产品服务期限"
                            name="startAndEndTime"
                            rules={[{ required: true, message: 'Please input!' }]}
                        >
                            <RangePicker />
                        </Form.Item>
                    </Col>
                </Row>
            </Card>
            <Form.Item wrapperCol={{ offset: 6, span: 12 }}>
                <Button
                    type="primary"
                    htmlType="submit"
                    size='large'
                    loading={loading}
                >
                    提交
                </Button>
            </Form.Item>
        </Form>
    );
};
export default FormPage;